<template>
    <view>
        <picker
            mode="multiSelector"
            :range="multiArray"
            :value="multiIndex"
            @change="bindMultiPickerChange"
            @columnchange="bindMultiPickerColumnChange"
        >
            <view>当前选择：{{ selectedDateTime }}</view>
        </picker>
    </view>
</template>

<script>
export default {
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        mode: {
            type: String,
            default: '年月日小时'
        },
        value: {
            type: String,
            default: ''
        },
        start: {
            type: String,
            default: ''
        },
        end: {
            type: String,
            default: ''
        }
    },
    data() {
        const currentYear = new Date().getFullYear();
        return {
            multiArray: this.generateMultiArray(currentYear),
            multiIndex: this.getDefaultIndex(),
            selectedDateTime: this.value
        };
    },
    computed: {
        startDateObj() {
            return this.parseDate(this.start);
        },
        endDateObj() {
            return this.parseDate(this.end);
        }
    },
    methods: {
        parseDate(dateStr) {
            if (!dateStr) return null;
            const parts = dateStr.split(/[- :]/);
            const year = parseInt(parts[0]);
            const month = parseInt(parts[1]);
            const day = parseInt(parts[2]);
            const hour = parts.length > 3 ? parseInt(parts[3]) : 0;
            const minute = parts.length > 4 ? parseInt(parts[4]) : 0;
            return { year, month, day, hour, minute };
        },
        generateDays(year, month) {
            const daysInMonth = new Date(year, month, 0).getDate();
            let days = Array.from({ length: daysInMonth }, (_, i) => (i + 1).toString().padStart(2, '0'));
            if (this.startDateObj && year === this.startDateObj.year && month === this.startDateObj.month) {
                days = days.filter(day => parseInt(day) >= this.startDateObj.day);
            }
            if (this.endDateObj && year === this.endDateObj.year && month === this.endDateObj.month) {
                days = days.filter(day => parseInt(day) <= this.endDateObj.day);
            }
            return days;
        },
        generateMultiArray(currentYear) {
            let baseArray = [
                this.generateYears(currentYear),
                ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
                this.generateDays(currentYear, 1)
            ];
            if (this.mode === '年月日小时') {
                baseArray.push(this.generateHours());
            } else if (this.mode === '年月日小时分') {
                baseArray.push(this.generateHours());
                baseArray.push(Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0')));
            }
            return baseArray;
        },
        generateYears(currentYear) {
            let years = Array.from({ length: 21 }, (_, i) => (currentYear - 10 + i).toString());
            if (this.startDateObj) {
                years = years.filter(year => parseInt(year) >= this.startDateObj.year);
            }
            if (this.endDateObj) {
                years = years.filter(year => parseInt(year) <= this.endDateObj.year);
            }
            return years;
        },
        generateHours() {
            let hours = Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, '0'));
            if (this.startDateObj) {
                hours = hours.filter(hour => parseInt(hour) >= this.startDateObj.hour);
            }
            if (this.endDateObj) {
                hours = hours.filter(hour => parseInt(hour) <= this.endDateObj.hour);
            }
            return hours;
        },
        getDefaultIndex() {
            const baseIndex = [0, 0, 0];
            if (this.mode === '年月日小时') {
                baseIndex.push(0);
            } else if (this.mode === '年月日小时分') {
                baseIndex.push(0);
                baseIndex.push(0);
            }
            return baseIndex;
        },
        bindMultiPickerChange(e) {
            const { multiArray, multiIndex } = this;
            let dateTimeStr = `${multiArray[0][multiIndex[0]]}-${multiArray[1][multiIndex[1]]}-${multiArray[2][multiIndex[2]]}`;
            if (this.mode === '年月日小时') {
                dateTimeStr += ` ${multiArray[3][multiIndex[3]]}`;
            } else if (this.mode === '年月日小时分') {
                dateTimeStr += ` ${multiArray[3][multiIndex[3]]}:${multiArray[4][multiIndex[4]]}`;
            }
            this.selectedDateTime = dateTimeStr;
            this.multiIndex = e.detail.value;
            this.$emit('change', dateTimeStr);
        },
        bindMultiPickerColumnChange(e) {
            let { multiArray, multiIndex } = this;
            multiIndex[e.detail.column] = e.detail.value;

            if (e.detail.column === 0 || e.detail.column === 1) {
                const year = parseInt(multiArray[0][multiIndex[0]]);
                const month = parseInt(multiArray[1][multiIndex[1]]);
                multiArray[2] = this.generateDays(year, month);

                if (multiIndex[2] >= multiArray[2].length) {
                    multiIndex[2] = multiArray[2].length - 1;
                }
            }

            this.multiArray = multiArray;
            this.multiIndex = multiIndex;
        }
    },
    watch: {
        mode(newMode) {
            const currentYear = new Date().getFullYear();
            this.multiArray = this.generateMultiArray(currentYear);
            this.multiIndex = this.getDefaultIndex();
            this.selectedDateTime = '';
        },
        start() {
            const currentYear = new Date().getFullYear();
            this.multiArray = this.generateMultiArray(currentYear);
            this.multiIndex = this.getDefaultIndex();
            this.selectedDateTime = '';
        },
        end() {
            const currentYear = new Date().getFullYear();
            this.multiArray = this.generateMultiArray(currentYear);
            this.multiIndex = this.getDefaultIndex();
            this.selectedDateTime = '';
        }
    }
};
</script>

<style>
view {
    margin: 20px;
    text-align: center;
}
</style>